<template>
  <div class="number-line">
    <template v-if="inPage=='preview' || inPage=='dataBoard'">
      <div class="text-line" v-for="(item,index) in this.tableList" :key="`board11${index}`">
        <p>{{ (item.name || item.sku) || 'Name' }}</p>
        <p>{{ item.data || 0 }}</p>
      </div>
    </template>
    <template v-else>
      <div class="text-line">
        <p>Temperature</p>
        <p>10.0</p>
      </div>
    </template>
  </div>
</template>

<script>
import {paneldetailData} from "@/api/system/board"

export default {
  props: ['keyData', 'inPage', 'componentsId'],
  name: "board11",
  data() {
    return {
      tableList: []
    }
  },
  watch: {
    keyData() {
      if (this.inPage === 'preview') {
        this.tableList = JSON.parse(JSON.stringify(this.keyData))
      }
    }
  },
  mounted() {
    if (this.keyData) {
      if (this.inPage === 'dataBoard') {
        this.getData()
      } else {
        this.tableList = JSON.parse(JSON.stringify(this.keyData))
      }
    }
  },
  methods: {
    getData() {
      paneldetailData({id: this.componentsId}).then(res => {
        let {data} = res
        let list_ = JSON.parse(JSON.stringify(this.keyData))
        this.tableList = []
        for (let index in list_) {
          let item = list_[index]
          item.data = data[index].data
          this.tableList.push(item)
        }
      })
    },
  }
}
</script>

<style scoped>
.number-line {
  height: 100%;
  width: 100%;
  display: flex;
}

.text-line {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.text-line p {
  margin: 0;
}

.text-line p:last-child {
  font-size: 30px;
  font-weight: bold;
}
</style>
